JavaScriptã®ã€ãã³ãããªã²ãŒã·ã§ã³ã掻çšããŠãWebã¢ããªã®ããã©ãŒãã³ã¹åäžãšã¡ã¢ãªäœ¿çšéã®åæžãå®çŸããŸãããã¹ããã©ã¯ãã£ã¹ãå®è£ æŠç¥ãå®äŸã解説ã
JavaScriptã®ã€ãã³ãããªã²ãŒã·ã§ã³ïŒããã©ãŒãã³ã¹ãšã¡ã¢ãªå¹çã®æé©å
çŸä»£ã®Webéçºã«ãããŠãããã©ãŒãã³ã¹ãšã¡ã¢ãªç®¡çã¯æãéèŠã§ããã¢ããªã±ãŒã·ã§ã³ãè€éåããã«ã€ããŠãå¹ççãªã€ãã³ãåŠçãäžå¯æ¬ ã«ãªããŸããJavaScriptã®ã€ãã³ãããªã²ãŒã·ã§ã³ã¯ãWebã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãšã¡ã¢ãªãããããªã³ããå€§å¹ ã«æ¹åã§ãã匷åãªãã¯ããã¯ã§ãããã®å æ¬çãªã¬ã€ãã§ã¯ãã€ãã³ãããªã²ãŒã·ã§ã³ã®ååãå©ç¹ãå®è£ ãããã³ãã¹ããã©ã¯ãã£ã¹ã«ã€ããŠæ¢æ±ããŸãã
ã€ãã³ãããªã²ãŒã·ã§ã³ãçè§£ãã
ã€ãã³ãããªã²ãŒã·ã§ã³ã¯ãããã¥ã¡ã³ããªããžã§ã¯ãã¢ãã«ïŒDOMïŒã«ãããã€ãã³ããããªã³ã°ã®ã¡ã«ããºã ãæŽ»çšããŸããããèŠçŽ ã§ã€ãã³ããçºçãããšããŸããã®ç¹å®ã®èŠçŽ ã«ã¢ã¿ãããããã€ãã³ããã³ãã©ãããªã¬ãŒãããŸãããã®åŸãã€ãã³ããæç€ºçã«åæ¢ãããªãéãïŒevent.stopPropagation()ã䜿çšïŒãã€ãã³ãã¯DOMããªãŒãããããªã³ã°ã¢ããããã芪èŠçŽ ã®ã€ãã³ããã³ãã©ã次ã
ãšããªã¬ãŒããããã¥ã¡ã³ãã®ã«ãŒãã«å°éããããã€ãã³ããã³ãã©ãäŒæã忢ãããŸã§ç¶ããŸãã
åã
ã®åèŠçŽ ã«ã€ãã³ããªã¹ããŒãã¢ã¿ãããã代ããã«ãã€ãã³ãããªã²ãŒã·ã§ã³ã§ã¯åäžã®ã€ãã³ããªã¹ããŒã芪èŠçŽ ã«ã¢ã¿ããããŸãããã®ãªã¹ããŒã¯ãã€ãã³ããæåã«ããªã¬ãŒããèŠçŽ ãåç
§ããã€ãã³ãã®targetããããã£ïŒevent.targetïŒã調æ»ããŸããã¿ãŒã²ããã調ã¹ãããšã§ããªã¹ããŒã¯ã€ãã³ããç¹å®ã®é¢å¿ã®ããåèŠçŽ ããçºçãããã©ããã倿ããé©åãªã¢ã¯ã·ã§ã³ãå®è¡ã§ããŸãã
åŸæ¥ã®ã¢ãããŒãïŒåã ã®èŠçŽ ãžã®ãªã¹ããŒã®ã¢ã¿ãã
ã€ãã³ãããªã²ãŒã·ã§ã³ã«æ·±ãå ¥ãåã«ãåã ã®èŠçŽ ã«çŽæ¥ã€ãã³ããªã¹ããŒãã¢ã¿ããããåŸæ¥ã®ã¢ãããŒããèŠãŠã¿ãŸããããã¢ã€ãã ã®ãªã¹ãããããåã¢ã€ãã ã®ã¯ãªãã¯ãåŠçãããã·ããªãªãèããŸãïŒ
const listItems = document.querySelectorAll('li');
listItems.forEach(item => {
item.addEventListener('click', function(event) {
console.log('Item clicked:', event.target.textContent);
});
});
ãã®ã³ãŒãã¯ålièŠçŽ ãå埩åŠçããããããã«åå¥ã®ã€ãã³ããªã¹ããŒãã¢ã¿ããããŸãããã®ã¢ãããŒãã¯æ©èœããŸãããç¹ã«å€æ°ã®èŠçŽ ãåçã«è¿œå ãããèŠçŽ ãæ±ãå Žåã«ã¯ãããã€ãã®æ¬ ç¹ããããŸãã
ã€ãã³ãããªã²ãŒã·ã§ã³ã®ã¢ãããŒãïŒããå¹ççãªè§£æ±ºç
ã€ãã³ãããªã²ãŒã·ã§ã³ã§ã¯ãåäžã®ã€ãã³ããªã¹ããŒã芪ã®ulèŠçŽ ã«ã¢ã¿ããããŸãïŒ
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
console.log('Item clicked:', event.target.textContent);
}
});
ãã®äŸã§ã¯ãã€ãã³ããªã¹ããŒã¯ulèŠçŽ ã«ã¢ã¿ãããããŠããŸããããããã®lièŠçŽ ïŒãŸãã¯ulå
ã®ä»ã®èŠçŽ ïŒã§ã¯ãªãã¯ã€ãã³ããçºçãããšãã€ãã³ãã¯ulãŸã§ãããªã³ã°ã¢ããããŸããã€ãã³ããªã¹ããŒã¯ãevent.targetãLIèŠçŽ ã§ãããã©ããããã§ãã¯ããŸããããããã§ããã°ãã³ãŒãã¯ç®çã®ã¢ã¯ã·ã§ã³ãå®è¡ããŸãã
ã€ãã³ãããªã²ãŒã·ã§ã³ã®å©ç¹
ã€ãã³ãããªã²ãŒã·ã§ã³ã¯ãåã ã®èŠçŽ ã«ã€ãã³ããªã¹ããŒãã¢ã¿ããããåŸæ¥ã®ã¢ãããŒãã«æ¯ã¹ãŠãããã€ãã®å€§ããªå©ç¹ãæäŸããŸãïŒ
- ããã©ãŒãã³ã¹ã®åäžïŒ DOMã«ã¢ã¿ãããããã€ãã³ããªã¹ããŒã®æ°ãæžãããç¹ã«å€æ°ã®èŠçŽ ãæ±ãå Žåã«ããã©ãŒãã³ã¹ãåäžããŸãã
- ã¡ã¢ãªæ¶è²»éã®åæžïŒ ã€ãã³ããªã¹ããŒãå°ãªãã»ã©ã¡ã¢ãªäœ¿çšéãå°ãªããªããããå¹ççãªã¢ããªã±ãŒã·ã§ã³ã«è²¢ç®ããŸãã
- ã³ãŒãã®ç°¡çŽ åïŒ ã€ãã³ãåŠçããžãã¯ãäžå åããã³ãŒããããã¯ãªãŒã³ã§ä¿å®ããããããŸãã
- åçã«è¿œå ãããèŠçŽ ã®åŠçïŒ ã€ãã³ããªã¹ããŒãã¢ã¿ãããããåŸã«DOMã«è¿œå ãããèŠçŽ ã«å¯ŸããŠãèªåçã«æ©èœããæ°ããèŠçŽ ã«ãªã¹ããŒãã¢ã¿ããããããã®è¿œå ã³ãŒãã¯äžèŠã§ãã
ããã©ãŒãã³ã¹ã®åäžïŒå®éçãªèŠç¹
ã€ãã³ãããªã²ãŒã·ã§ã³ã«ããããã©ãŒãã³ã¹ã®åäžã¯ãç¹ã«æ°çŸãŸãã¯æ°åã®èŠçŽ ãæ±ãå Žåã«éåžžã«å€§ãããªãå¯èœæ§ããããŸããåã ã®èŠçŽ ã«ã€ãã³ããªã¹ããŒãã¢ã¿ããããããšã¯ãã¡ã¢ãªãšåŠçèœåãæ¶è²»ããŸãããã©ãŠã¶ã¯åãªã¹ããŒã远跡ãããã®èŠçŽ ã§å¯Ÿå¿ããã€ãã³ããçºçãããã³ã«ãé¢é£ããã³ãŒã«ããã¯é¢æ°ãåŒã³åºãå¿ èŠããããŸããããã¯ãç¹ã«å€ãããã€ã¹ããªãœãŒã¹ãéãããç°å¢ã§ã¯ãããã«ããã¯ã«ãªãå¯èœæ§ããããŸãã
ã€ãã³ãããªã²ãŒã·ã§ã³ã¯ãåäžã®ãªã¹ããŒã芪èŠçŽ ã«ã¢ã¿ããããããšã§ããã®ãªãŒããŒããããåçã«åæžããŸãããã©ãŠã¶ã¯åèŠçŽ ã®æ°ã«é¢ä¿ãªãã1ã€ã®ãªã¹ããŒã管çããã ãã§æžã¿ãŸããã€ãã³ããçºçããå Žåããã©ãŠã¶ã¯åäžã®ã³ãŒã«ããã¯é¢æ°ãåŒã³åºãã ãã§ããããã®é¢æ°ãevent.targetã«åºã¥ããŠé©åãªã¢ã¯ã·ã§ã³ã決å®ããŸãã
ã¡ã¢ãªå¹çïŒã¡ã¢ãªãããããªã³ãã®æå°å
åã€ãã³ããªã¹ããŒã¯ã¡ã¢ãªãæ¶è²»ããŸãã倿°ã®ãªã¹ããŒãåã ã®èŠçŽ ã«ã¢ã¿ãããããšãã¢ããªã±ãŒã·ã§ã³ã®ã¡ã¢ãªãããããªã³ããå€§å¹ ã«å¢å ããå¯èœæ§ããããŸããããã¯ãç¹ã«ã¡ã¢ãªãéãããŠããããã€ã¹ã§ããã©ãŒãã³ã¹ã®äœäžã«ã€ãªããå¯èœæ§ããããŸãã
ã€ãã³ãããªã²ãŒã·ã§ã³ã¯ãã€ãã³ããªã¹ããŒã®æ°ãæžããããšã§ã¡ã¢ãªæ¶è²»ãæå°éã«æããŸããããã¯ãã¡ã¢ãªç®¡çãéèŠãšãªãã·ã³ã°ã«ããŒãžã¢ããªã±ãŒã·ã§ã³ïŒSPAïŒããã®ä»ã®è€éãªWebã¢ããªã±ãŒã·ã§ã³ã§ç¹ã«æçã§ãã
ã€ãã³ãããªã²ãŒã·ã§ã³ã®å®è£ ïŒå®è·µçãªäŸ
ã€ãã³ãããªã²ãŒã·ã§ã³ã广çã«é©çšã§ããæ§ã ãªã·ããªãªãæ¢ã£ãŠã¿ãŸãããã
äŸ1ïŒåçãªã¹ãã§ã®ã¯ãªãã¯åŠç
åçã«è¿œå ã»åé€ã§ããã¿ã¹ã¯ã®ãªã¹ãããããšæ³åããŠãã ãããã€ãã³ãããªã²ãŒã·ã§ã³ã䜿çšãããšãããŒãžèªã¿èŸŒã¿åŸã«è¿œå ãããã¿ã¹ã¯ã§ãã£ãŠãããããã®ã¿ã¹ã¯ã®ã¯ãªãã¯ãç°¡åã«åŠçã§ããŸãã
<ul id="taskList">
<li>Task 1</li>
<li>Task 2</li>
<li>Task 3</li>
</ul>
<button id="addTask">Add Task</button>
const taskList = document.getElementById('taskList');
const addTaskButton = document.getElementById('addTask');
taskList.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
event.target.classList.toggle('completed');
}
});
addTaskButton.addEventListener('click', function() {
const newTask = document.createElement('li');
newTask.textContent = 'New Task';
taskList.appendChild(newTask);
});
ãã®äŸã§ã¯ãã¿ã¹ã¯ãã¯ãªãã¯ãããš'completed'ã¯ã©ã¹ããã°ã«ãããŸããã€ãã³ãããªã²ãŒã·ã§ã³ã®ãããã§ãæ°ããã¿ã¹ã¯ã远å ããŠãæ¢åã®ã€ãã³ããªã¹ããŒã§èªåçã«æ©èœããŸãã
äŸ2ïŒããŒãã«ã§ã®ã€ãã³ãåŠç
ããŒãã«ã«ã¯å€æ°ã®è¡ãšã»ã«ãå«ãŸããŠããããšããããããŸããåã»ã«ã«ã€ãã³ããªã¹ããŒãã¢ã¿ããããã®ã¯éå¹ççã§ããã€ãã³ãããªã²ãŒã·ã§ã³ã¯ãããã¹ã±ãŒã©ãã«ãªãœãªã¥ãŒã·ã§ã³ãæäŸããŸãã
<table id="dataTable">
<thead>
<tr><th>Name</th><th>Age</th><th>Country</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>30</td><td>USA</td></tr>
<tr><td>Bob</td><td>25</td><td>Canada</td></tr>
<tr><td>Charlie</td><td>35</td><td>UK</td></tr>
</tbody>
</table>
const dataTable = document.getElementById('dataTable');
dataTable.addEventListener('click', function(event) {
if (event.target.tagName === 'TD') {
console.log('Cell clicked:', event.target.textContent);
// You can access the row using event.target.parentNode
const row = event.target.parentNode;
const name = row.cells[0].textContent;
const age = row.cells[1].textContent;
const country = row.cells[2].textContent;
console.log(`Name: ${name}, Age: ${age}, Country: ${country}`);
}
});
ãã®äŸã§ã¯ãã»ã«ãã¯ãªãã¯ãããšãã®å
容ãšå¯Ÿå¿ããè¡ã®ããŒã¿ããã°ã«åºåãããŸãããã®ã¢ãããŒãã¯ãåTDèŠçŽ ã«åå¥ã®ã¯ãªãã¯ãªã¹ããŒãã¢ã¿ãããããããã¯ããã«å¹ççã§ãã
äŸ3ïŒããã²ãŒã·ã§ã³ã¡ãã¥ãŒã®å®è£
ã€ãã³ãããªã²ãŒã·ã§ã³ã䜿çšãããšãããã²ãŒã·ã§ã³ã¡ãã¥ãŒé ç®ã®ã¯ãªãã¯ãå¹ççã«åŠçã§ããŸãã
<nav>
<ul id="mainNav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
const mainNav = document.getElementById('mainNav');
mainNav.addEventListener('click', function(event) {
if (event.target.tagName === 'A') {
event.preventDefault(); // Prevent default link behavior
const href = event.target.getAttribute('href');
console.log('Navigating to:', href);
// Implement your navigation logic here
}
});
ãã®äŸã¯ãã€ãã³ãããªã²ãŒã·ã§ã³ã䜿çšããŠããã²ãŒã·ã§ã³ãªã³ã¯ã®ã¯ãªãã¯ãåŠçããæ¹æ³ã瀺ããŠããŸããããã©ã«ãã®ãªã³ã¯ã®åäœãé²ããã¿ãŒã²ããURLããã°ã«åºåããŸãããã®åŸãã·ã³ã°ã«ããŒãžã¢ããªã±ãŒã·ã§ã³ã®ã³ã³ãã³ããæŽæ°ãããªã©ãã«ã¹ã¿ã ã®ããã²ãŒã·ã§ã³ããžãã¯ãå®è£ ã§ããŸãã
ã€ãã³ãããªã²ãŒã·ã§ã³ã®ãã¹ããã©ã¯ãã£ã¹
ã€ãã³ãããªã²ãŒã·ã§ã³ã®å©ç¹ãæå€§éã«æŽ»çšããã«ã¯ã以äžã®ãã¹ããã©ã¯ãã£ã¹ã«åŸã£ãŠãã ããïŒ
- ç¹å®ã®èŠçŽ ãã¿ãŒã²ããã«ããïŒ ã€ãã³ããªã¹ããŒã
event.targetããããã£ããã§ãã¯ããŠãåŠçãããç¹å®ã®èŠçŽ ãèå¥ããããã«ããŠãã ããã芪ã³ã³ããå ã®ä»ã®èŠçŽ ããçºçããã€ãã³ãã«å¯ŸããŠäžèŠãªã³ãŒããå®è¡ããã®ãé¿ããŠãã ããã - CSSã¯ã©ã¹ãŸãã¯ããŒã¿å±æ§ã䜿çšããïŒ é¢å¿ã®ããèŠçŽ ãèå¥ããããã«ãCSSã¯ã©ã¹ãŸãã¯ããŒã¿å±æ§ã䜿çšããŸããããã«ãããã³ãŒããããèªã¿ããããä¿å®ãããããªããŸããäŸãã°ãåŠçãããèŠçŽ ã«
'clickable-item'ã®ãããªã¯ã©ã¹ã远å ããã€ãã³ããªã¹ããŒã§ãã®ã¯ã©ã¹ããã§ãã¯ã§ããŸãã - é床ã«åºç¯ãªã€ãã³ããªã¹ããŒãé¿ããïŒ ã€ãã³ããªã¹ããŒãã©ãã«ã¢ã¿ãããããã«æ³šæããŠãã ããã
documentãbodyã«ã¢ã¿ãããããšã倿°ã®ã€ãã³ãã«å¯ŸããŠã€ãã³ããã³ãã©ãäžå¿ èŠã«å®è¡ãããå Žåã«ããã©ãŒãã³ã¹ãäœäžããå¯èœæ§ããããŸããåŠçããããã¹ãŠã®èŠçŽ ãå«ãæãè¿ã芪èŠçŽ ãéžæããŠãã ããã - ã€ãã³ãã®äŒæãèæ
®ããïŒ ã€ãã³ããããªã³ã°ãã©ã®ããã«æ©èœãããããŸã
event.stopPropagation()ã䜿çšããŠã€ãã³ãã®äŒæã忢ããå¿ èŠããããã©ãããçè§£ããŠãã ãããå Žåã«ãã£ãŠã¯ãæå³ããªãå¯äœçšãé¿ããããã«ãã€ãã³ãã芪èŠçŽ ã«ãããªã³ã°ã¢ããããã®ãé²ãããããšããããŸãã - ã€ãã³ããªã¹ããŒã®ããžãã¯ãæé©åããïŒ ã€ãã³ããªã¹ããŒã®ããžãã¯ãç°¡æœãã€å¹ççã«ä¿ã¡ãŸããã€ãã³ããã³ãã©å ã§è€éãŸãã¯æéã®ãããæäœãå®è¡ããããšã¯ãããã©ãŒãã³ã¹ã«åœ±é¿ãäžããå¯èœæ§ãããããé¿ããŠãã ãããå¿ èŠã«å¿ããŠãè€éãªæäœãå¥ã®é¢æ°ã«é å»¶ããããããããŠã³ã¹ãã¹ããããªã³ã°ã®ãããªãã¯ããã¯ã䜿çšããŠå®è¡é »åºŠãå¶éããŠãã ããã
- 培åºçã«ãã¹ãããïŒ ã€ãã³ãããªã²ãŒã·ã§ã³ã®å®è£ ãæåŸ éãã«æ©èœããããšã確èªããããã«ãããŸããŸãªãã©ãŠã¶ãããã€ã¹ã§åŸ¹åºçã«ãã¹ãããŠãã ãããç¹ã«å€æ°ã®èŠçŽ ãè€éãªã€ãã³ãåŠçããžãã¯ãæ±ãå Žåã¯ãããã©ãŒãã³ã¹ãšã¡ã¢ãªäœ¿çšéã«æ³šæãæã£ãŠãã ããã
é«åºŠãªãã¯ããã¯ãšèæ ®äºé
ããŒã¿å±æ§ã䜿çšããã€ãã³ãåŠçã®åŒ·å
ããŒã¿å±æ§ã¯ãHTMLèŠçŽ ã«ã«ã¹ã¿ã ããŒã¿ãä¿åããæè»ãªæ¹æ³ãæäŸããŸããã€ãã³ãããªã²ãŒã·ã§ã³ãšçµã¿åãããŠããŒã¿å±æ§ã掻çšããã€ãã³ããã³ãã©ã«è¿œå æ å ±ãæž¡ãããšãã§ããŸãã
<ul id="productList">
<li data-product-id="123" data-product-name="Laptop">Laptop</li>
<li data-product-id="456" data-product-name="Mouse">Mouse</li>
<li data-product-id="789" data-product-name="Keyboard">Keyboard</li>
</ul>
const productList = document.getElementById('productList');
productList.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
const productId = event.target.dataset.productId;
const productName = event.target.dataset.productName;
console.log(`Product clicked: ID=${productId}, Name=${productName}`);
// You can now use productId and productName to perform other actions
}
});
ãã®äŸã§ã¯ãålièŠçŽ ã«data-product-idãšdata-product-name屿§ããããŸããã€ãã³ããªã¹ããŒã¯event.target.datasetã䜿çšããŠãããã®å€ãååŸããã€ãã³ããã³ãã©å
ã§è£œååºæã®æ
å ±ã«ã¢ã¯ã»ã¹ã§ããããã«ããŸãã
ç°ãªãã€ãã³ãã¿ã€ãã®åŠç
ã€ãã³ãããªã²ãŒã·ã§ã³ã¯ã¯ãªãã¯ã€ãã³ãã«éå®ãããŸãããmouseoverãmouseoutãkeyupãkeydownãªã©ãããŸããŸãªã€ãã³ãã¿ã€ããåŠçããããã«äœ¿çšã§ããŸããåã«é©åãªã€ãã³ããªã¹ããŒã芪èŠçŽ ã«ã¢ã¿ããããããã«å¿ããŠã€ãã³ãåŠçããžãã¯ã調æŽããã ãã§ãã
Shadow DOMã®æ±ã
Shadow DOMã䜿çšããŠããå Žåãã€ãã³ãããªã²ãŒã·ã§ã³ã¯ããè€éã«ãªãå¯èœæ§ããããŸããããã©ã«ãã§ã¯ãã€ãã³ãã¯ã·ã£ããŠå¢çãè¶ããŠãããªã³ã°ããŸãããShadow DOMå
ããã®ã€ãã³ããåŠçããã«ã¯ãShadow DOMãäœæããéã«composed: trueãªãã·ã§ã³ã䜿çšããå¿
èŠããããããããŸããïŒ
const shadowHost = document.getElementById('shadowHost');
const shadowRoot = shadowHost.attachShadow({ mode: 'open', composed: true });
ããã«ãããShadow DOMå ããã®ã€ãã³ããã¡ã€ã³DOMã«ãããªã³ã°ã¢ããããããã§å§ä»»ãããã€ãã³ããªã¹ããŒã«ãã£ãŠåŠçãããããšãå¯èœã«ãªããŸãã
å®äžçã§ã®å¿çšãšäŸ
ã€ãã³ãããªã²ãŒã·ã§ã³ã¯ãReactãAngularãVue.jsãªã©ã®ããŸããŸãªWebéçºãã¬ãŒã ã¯ãŒã¯ãã©ã€ãã©ãªã§åºã䜿çšãããŠããŸãããããã®ãã¬ãŒã ã¯ãŒã¯ã¯ãã€ãã³ãåŠçãæé©åããããã©ãŒãã³ã¹ãåäžãããããã«ãå éšçã«ã€ãã³ãããªã²ãŒã·ã§ã³ã䜿çšããããšããããããŸãã
ã·ã³ã°ã«ããŒãžã¢ããªã±ãŒã·ã§ã³ïŒSPAïŒ
SPAã¯ãã°ãã°DOMã®åçãªæŽæ°ã䌎ããŸããã€ãã³ãããªã²ãŒã·ã§ã³ã¯ãåæããŒãžèªã¿èŸŒã¿åŸã«DOMã«è¿œå ãããèŠçŽ ã®ã€ãã³ããåŠçã§ãããããSPAã§ç¹ã«äŸ¡å€ããããŸããäŸãã°ãAPIããååŸãã補åã®ãªã¹ãã衚瀺ããSPAã§ã¯ã補åãªã¹ããæŽæ°ããããã³ã«ã€ãã³ããªã¹ããŒãåã¢ã¿ããããããšãªãã補åã¢ã€ãã ã®ã¯ãªãã¯ãåŠçããããã«ã€ãã³ãããªã²ãŒã·ã§ã³ã䜿çšã§ããŸãã
ã€ã³ã¿ã©ã¯ãã£ããªããŒãã«ãšã°ãªãã
ã€ã³ã¿ã©ã¯ãã£ããªããŒãã«ãã°ãªããã§ã¯ãåã ã®ã»ã«ãè¡ã®ã€ãã³ããåŠçããå¿ èŠããããŸããã€ãã³ãããªã²ãŒã·ã§ã³ã¯ãç¹ã«å€§èŠæš¡ãªããŒã¿ã»ãããæ±ãå Žåã«ããããã®ã€ãã³ããå¹ççã«åŠçããæ¹æ³ãæäŸããŸããäŸãã°ãã€ãã³ãããªã²ãŒã·ã§ã³ã䜿çšããŠãããŒãã«ãã°ãªããã§ã®ããŒã¿ã®ãœãŒãããã£ã«ã¿ãªã³ã°ãç·šéãªã©ã®æ©èœãå®è£ ã§ããŸãã
åçãã©ãŒã
åçãã©ãŒã ã§ã¯ããŠãŒã¶ãŒã®æäœã«åºã¥ããŠãã©ãŒã ãã£ãŒã«ãã远å ãŸãã¯åé€ããããšããããããŸããã€ãã³ãããªã²ãŒã·ã§ã³ã䜿çšãããšãåãã£ãŒã«ãã«æåã§ã€ãã³ããªã¹ããŒãã¢ã¿ããããããšãªãããããã®ãã©ãŒã ãã£ãŒã«ãã®ã€ãã³ããåŠçã§ããŸããäŸãã°ãã€ãã³ãããªã²ãŒã·ã§ã³ã䜿çšããŠãåçãã©ãŒã ã§æ€èšŒããªãŒãã³ã³ããªãŒããæ¡ä»¶ä»ãããžãã¯ãªã©ã®æ©èœãå®è£ ã§ããŸãã
ã€ãã³ãããªã²ãŒã·ã§ã³ã®ä»£æ¿æ¡
ã€ãã³ãããªã²ãŒã·ã§ã³ã¯åŒ·åãªãã¯ããã¯ã§ããããã¹ãŠã®ã·ããªãªã§æåã®è§£æ±ºçãšã¯éããŸãããä»ã®ã¢ãããŒããããé©åãªç¶æ³ããããŸãã
çŽæ¥çãªã€ãã³ããã€ã³ãã£ã³ã°
èŠçŽ ã®æ°ãå°ãªãåºå®çã§ãã€ãã³ãåŠçããžãã¯ãæ¯èŒçåçŽãªå Žåã¯ãçŽæ¥çãªã€ãã³ããã€ã³ãã£ã³ã°ã§ååãªå ŽåããããŸããçŽæ¥çãªã€ãã³ããã€ã³ãã£ã³ã°ã¯ãaddEventListener()ã䜿çšããŠåèŠçŽ ã«çŽæ¥ã€ãã³ããªã¹ããŒãã¢ã¿ããããããšãå«ã¿ãŸãã
ãã¬ãŒã ã¯ãŒã¯åºæã®ã€ãã³ãåŠç
ReactãAngularãVue.jsã®ãããªçŸä»£ã®Webéçºãã¬ãŒã ã¯ãŒã¯ã¯ãç¬èªã®ã€ãã³ãåŠçã¡ã«ããºã ãæäŸããŠããŸãããããã®ã¡ã«ããºã ã¯ãå éšçã«ã€ãã³ãããªã²ãŒã·ã§ã³ãçµã¿èŸŒãã§ãããããã¬ãŒã ã¯ãŒã¯ã®ã¢ãŒããã¯ãã£ã«æé©åããã代æ¿ã¢ãããŒããæäŸããããšããããããŸãããããã®ãã¬ãŒã ã¯ãŒã¯ã®ããããã䜿çšããŠããå Žåã¯ãç¬èªã®ã€ãã³ãããªã²ãŒã·ã§ã³ããžãã¯ãå®è£ ããã®ã§ã¯ãªãããã¬ãŒã ã¯ãŒã¯ã®çµã¿èŸŒã¿ã®ã€ãã³ãåŠçæ©èœã䜿çšããããšãäžè¬çã«æšå¥šãããŸãã
çµè«
JavaScriptã®ã€ãã³ãããªã²ãŒã·ã§ã³ã¯ãWebã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãšã¡ã¢ãªå¹çãæé©åããããã®è²Žéãªãã¯ããã¯ã§ããåäžã®ã€ãã³ããªã¹ããŒã芪èŠçŽ ã«ã¢ã¿ããããã€ãã³ããããªã³ã°ã掻çšããããšã§ãã€ãã³ããªã¹ããŒã®æ°ãå€§å¹ ã«åæžããã³ãŒããç°¡çŽ åã§ããŸãããã®ã¬ã€ãã§ã¯ãã€ãã³ãããªã²ãŒã·ã§ã³ã®ååãå©ç¹ãå®è£ ããã¹ããã©ã¯ãã£ã¹ãããã³å®äžçã®äŸãå«ãå æ¬çãªæŠèŠãæäŸããŸããããããã®æŠå¿µãé©çšããããšã§ãããããã©ãŒãã³ã¹ãé«ããå¹ççã§ãä¿å®ããããWebã¢ããªã±ãŒã·ã§ã³ãäœæããã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã«ããè¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸã§ããŸãããããã®ãã¯ããã¯ããããžã§ã¯ãã®ç¹å®ã®ããŒãºã«åãããŠé©å¿ãããåžžã«çè§£ããããä¿å®ãããããã¯ãªãŒã³ã§ããæ§é åãããã³ãŒããæžãããšãåªå ããŠãã ããã